<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/shouye.css">
    <link rel="stylesheet" href="css/gouwuche.css">

    <style>
        tbody img {
            width: 40px;
        }
    </style>
</head>

<body>
    <!--1.网页顶部 -->
    <div class="module">
        <div class="header one">
            <div class="header-c">
                <div class="header-left">
                    <li class="li1">
                        <p>Hello,Welcome to OJO眼镜</p>
                    </li>
                    <li class="li2">
                        网站导航
                    </li>
                    <li class="li3">
                        消息
                    </li>
                </div>
                <div class="header-right">
                    <a href="dengluzhuce.html" class="aershi">
                        <li class="denglubtn">登录</li>
                    </a>
                    <a href="dengluzhuce.html#zc">
                        <li>注册</li>
                    </a>
                    <a href="gouwuche.html">
                        <li>购物车</li>
                    </a>
                    <a href="#">
                        <li>我的订单</li>
                    </a>
                    <a href="#" style="position: relative;" class="ajiu">
                        <li>个人中心
                            <div class="divshi" style="position: absolute;">
                                <p>个人资料</p>
                                <p>全部订单</p>
                                <p class="border">我的足迹</p>
                            </div>

                        </li>
                    </a>
                    <a href="#">
                        <li>历史记录</li>
                    </a>
                    <a href="#">
                        <li>帮助中心</li>
                    </a>
                    <a href="#" id="ashi" style="position: relative;">
                        <li>手机版
                            <div style="position: absolute; left: 0;" class="boxshi">
                                <img src="https://www.o-j-o.cn/themes/ojo/images/weixin1.png" alt="" id="imgshi">
                                <p>移动端下载</p>
                            </div>
                        </li>
                    </a>

                </div>
            </div>
        </div>
    </div>
    <!-- 2.网页头部,搜索栏 -->
    <div class="module">
        <div class="headerone">
            <div class="headerone-c">
                <div class="headeroneleft">
                    <a href="shouye.html"><img src="https://www.o-j-o.cn/themes/ojo/images/logo.png" alt="" class="im1"></a>
                </div>
                <div class="headerright">
                    <div class="search">
                        <input type="text" placeholder="纯钛眼镜">
                        <a href="#" class="awushi">搜索</a>
                    </div>
                    <div class="zhifu-z">
                        <a href="#" class="zhifu">我的O-J-O中心</a>
                    </div>
                    <div class="search-font">
                        <a href="#">热门搜索:</a>
                        <a href="#">框架眼镜</a>
                        <a href="#">太阳眼镜</a>
                        <a href="#">眼镜片</a>
                        <a href="#">OJO</a>
                        <!-- <a href="#">女式太阳镜</a> -->
                        <a href="#">钛架</a>
                        <!-- <a href="#">近视眼镜</a> -->
                        <a href="#" style="border: none !important;">男士太阳镜</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 3.导航栏 -->
    <div class="module">
        <!-- menu:导航栏 -->
        <div class="menu">
            <div class="all-sort">
                <h2><a href="">全部商品分类</a></h2>
            </div>
            <div class="nav">
                <ul class="clearfix">
                    <li><a href="" class="current">所有商品</a></li>
                    <li><a href="shouye.html">首页</a></li>
                    <li><a href="">框架眼镜</a></li>
                    <li><a href="splb.html">纯钛眼镜</a></li>
                    <li><a href="">太阳眼镜</a></li>
                    <li><a href="">眼镜片</a></li>
                    <li><a href="">近视眼镜</a></li>
                    <li><a href="">渐进片</a></li>
                </ul>
            </div>
        </div>
    </div>

    <h2><small><a href="splb.html" style="margin:20px auto 20px 100px">继续购物</a></small></h2>

    <div class="tab-box">
        <table class="table mt-5">
            <thead>
                <tr>
                    <th>全选：<input type="checkbox" class="allCheck"></th>
                    <th>图片</th>
                    <th style="width:400px;">名称</th>
                    <th style="width:50px;">数量</th>
                    <th>售价</th>
                    <th>总价</th>
                    <th>删除</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td>1</td>
                        <td><input type="number"></td>
                        <td>1</td>
                        <td><span class="btn btn-warning">删除</span></td>
                    </tr> -->
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3" align="right">总数量：</td>
                    <td class="allNum">0</td>
                    <td align="right">合计：</td>
                    <td class="allPrice">0</td>
                </tr>
            </tfoot>
        </table>

    </div>

    <!-- 5.网页底部 -->
    <div class="module">
        <div class="footer">
            <div class="footer-c">
                <div class="footer-top">
                    <div class="footer-tit">
                        <div class="li-b">
                            <span style="font-weight: bolder;">关于OJO眼镜</span>
                            <li>免责声明</li>
                            <li>隐私保护</li>
                            <li>诚聘英才</li>
                            <li>联系我们</li>
                            <li>联系客服</li>
                        </div>
                    </div>

                    <div class="footer-tit">
                        <div class="li-b">
                            <spa style="font-weight: bolder;" n>新手入门</span>
                                <li>购物流程</li>
                                <li>会员介绍</li>
                                <li>常见问题</li>
                                <li>发票说明</li>
                                <li>优惠券</li>
                        </div>
                    </div>

                    <div class="footer-tit">
                        <div class="li-b">
                            <spa style="font-weight: bolder;" n>支付配送</span>
                                <li>支付流程</li>
                                <li>会员介绍</li>
                                <li>支付方式</li>
                                <li>货到付款</li>
                                <li>快递及运费</li>
                        </div>
                    </div>

                    <div class="footer-tit">
                        <div class="li-b">
                            <spa style="font-weight: bolder;" n>售后服务</span>
                                <li>30天包退</li>
                                <li>如何换货</li>
                                <li>如何挑货</li>
                                <li>使用说明</li>
                                <li>投诉建议</li>
                        </div>
                    </div>
                    <div class="footer-tit">
                        <div class="li-b">
                            <spa style="font-weight: bolder;" n>帮助中心</span>
                                <li>友情链接</li>
                                <li>常见问题</li>
                                <li>验光单对照</li>
                                <li>购物协议</li>
                                <li>注册协议</li>
                        </div>
                    </div>
                </div>

                <div class="footer-bottom">
                    <div class="bottom-nav">
                        <li>OJO首页</li>
                        <li>眼镜知识</li>
                        <li>框架眼镜</li>
                        <li>联系我们</li>
                        <li>投诉建议</li>
                        <li>网站地图</li>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="js/jquery.js"></script>
<script>
    class Cart {
        constructor() {
            this.cont = $("tbody");
            this.url = "data/pro.json";
            this.load();
            this.addEvent();
        }
        addEvent() {
            const that = this;
            this.cont.on("click", ".del", function(eve) {
                that.id = $(this).parent().parent().attr("data-id");
                $(this).parent().parent().remove();
                that.setData(function(i) {
                    that.proMsg.splice(i, 1);
                });
            })
            this.cont.on("input", ".set", function(eve) {
                    that.id = $(this).parent().parent().attr("data-id");

                    let sumEle = $(this).parent().next().next();
                    let priceEle = $(this).parent().next();
                    sumEle.html($(this).val() * priceEle.html());

                    that.setData((i) => {
                        that.proMsg[i].num = $(this).val();
                    });
                })
                // 单个复选框的事件
            this.cont.on("input", ".check", function(eve) {
                    // 根据选中状态，设置自定义属性，用来判断是否是全选
                    if (this.checked) {
                        $(this).attr("a", "1");
                    } else {
                        $(this).removeAttr("a");
                    }

                    // 找到所有复选框，判断全部状态，决定是否选中全选
                    that.allCheck();

                    // 获取id
                    that.id = $(this).parent().parent().attr("data-id");

                    // 将单个复选框的状态存到数据中
                    that.setData((i) => {
                        that.proMsg[i].check = this.checked;
                    });
                })
                // 全选复选框的事件
            $(".allCheck").on("click", function() {
                let chk = Array.from($(".check"))
                    // 遍历所有复选框
                chk.forEach(val => {
                    // 设置所有复选框的状态
                    val.checked = this.checked;

                    // 修改自定义属性，用来判断是否是全选
                    if (this.checked) {
                        $(val).attr("a", 1);
                    } else {
                        $(val).removeAttr("a");
                    }

                    // 逐个获取单个复选框的id
                    that.id = $(val).parent().parent().attr("data-id");
                    // 逐个修改单个复选框的数据中的状态
                    that.setData((i) => {
                        that.proMsg[i].check = this.checked;
                    });
                })
            })
        }
        setPrice() {
            // 计算总数量
            // console.log(that.proMsg)
            let sum = 0;
            this.proMsg.forEach(val => {
                if (val.check) {
                    sum += parseInt(val.num);
                }
            })
            $(".allNum").html(sum);

            // 计算总价
            let sumPrice = 0;
            this.proMsg.forEach(val => {
                if (val.check) {
                    sumPrice += parseInt(val.num) * parseFloat(val.price);
                    // console.log(val.num);
                    // console.log(val.price);
                    // console.log(sumPrice);
                }
                // console.log(sumPrice);
            })
            $(".allPrice").html(sumPrice);

        }
        allCheck() {
            // 找到所有复选框，判断全部状态，决定是否选中全选
            let chk = Array.from($(".check"));
            const onoff = chk.every(val => {
                return $(val).attr("a") == 1
            })
            $(".allCheck").get(0).checked = onoff;
        }
        setData(cb) {
            let i = 0;
            this.proMsg.some((val, idx) => {
                i = idx;
                return val.id === this.id;
            })
            cb(i);
            localStorage.setItem("proMsg", JSON.stringify(this.proMsg))

            this.setPrice();
        }
        load() {
            $.ajax({
                url: this.url,
                success: (res) => {
                    this.res = JSON.parse(res)

                    this.getData();
                }
            })
        }
        getData() {
            this.proMsg = localStorage.getItem("proMsg") ? JSON.parse(localStorage.getItem("proMsg")) : [];
            this.render();
        }
        render() {
            let str = "";
            for (let i = 0; i < this.res.length; i++) {
                for (let j = 0; j < this.proMsg.length; j++) {
                    if (this.res[i].wId === this.proMsg[j].id) {
                        str += `<tr data-id="${this.proMsg[j].id}">
                                    <td><input type="checkbox" class="check" ${this.proMsg[j].check ? 'checked' : ''} ${this.proMsg[j].check ? 'a=1' : ''}></td>
                                    <td><img src="${this.res[i].img}"></td>
                                    <td>${this.res[i].name}</td>
                                    <td><input type="number" value="${this.proMsg[j].num}" class="set"></td>
                                    <td>${this.res[i].price}</td>
                                    <td>${this.res[i].price * this.proMsg[j].num}</td>
                                    <td><span class="btn btn-warning del">删除</span></td>
                                </tr>`
                    }
                }
            }
            this.cont.html(str);
            this.allCheck();
            this.setPrice();
        }
    }

    new Cart;




    let userMsg = sessionStorage.getItem("userMsg") ? JSON.parse(sessionStorage.getItem("userMsg")) : {};
    if (userMsg.user && userMsg.pass) {
        $(".denglubtn").html(userMsg.user);
        $(".aershi").attr("href", "#");
    } else {
        alert("请先登录,再打开购物车");
        // alert("请先登录")
        location.href = "http://localhost:3000/dengluzhuce.html"
    }
</script>
<!-- 登陆成功后网页顶部样式改变 -->
<script>
    let userMsg = sessionStorage.getItem("userMsg") ? JSON.parse(sessionStorage.getItem("userMsg")) : {};
    if (userMsg.user && userMsg.pass) {
        console.log(1);
        $(".denglubtn").html(userMsg.user);
        $(".aershi").attr("href", "#");
    }
</script>

</html>